import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import {Badge, message, Tabs} from 'antd'
const TabPane = Tabs.TabPane;
import ModuleDisplayIndex from "containers/setting/sub-application/module-display-setting/module-display-index";
import ModuleDisplayMine from "containers/setting/sub-application/module-display-setting/module-display-mine";
import subApplicationService from "../sub-application.service";

class ModuleDisplaySetting extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      activeKey: 'index',
      profileSetting: [],
      widgetListIndexMap: {},
      loading: false,
      record: {
        // enableAccountbind: true,
        // enableDidibind: true,
        // enableFeedback: true,//帮助与反馈
        // enableCustomerservice: true,
        // enableGuide: true,
        // enableAboutus: true,
        // enableContactus: true,
        // enableFeedbackContactus: true,
        // enableSecuritypassword: true,
        // enableMessage: true,
        // enableQrcode: true,//扫一扫
        // enableApproval: true,//审批
        // enableDocstatus: true,//单据动态
        // enableFastitem: true,//快速创建
        // enableBusinessTravel: true,//商务出行
      },
    }
  }

  componentDidMount() {
    this.getCurrentSetting();
  }

  //获取映射关系
  getCurrentSetting = async () => {
    this.setState({
      loading: true,
    });
    let targetState = {
      loading: false,
    };
    try {
      let res = await subApplicationService.getHomePageCardDetail();
      const notProfileSettingKey = ['tenantId', 'id', 'widgetList'];
      if (res && res.data) {
        let data = res.data,
          { widgetList } = data,
          widgetListIndexMap = {};
        targetState.record = data;
        targetState.profileSetting = Object.keys(data).filter(key => !notProfileSettingKey.includes(key));
        if (widgetList && widgetList.length) {
          widgetList.forEach((item, index) => {
            widgetListIndexMap[item.appCode] = index;
          })
          targetState.widgetListIndexMap = {...widgetListIndexMap};
        }
      }
      this.setState(targetState)
    } catch (e) {
      this.setState({
        loading: false,
      });
    }
  };

  handleFormChange = (changedFields) => {
    let changedObj = {},
      { profileSetting, widgetListIndexMap, record } = this.state,
      { widgetList } = record;
    for (let key in changedFields) {
      let item = changedFields[key];
      if (profileSetting.includes(key)) {
        changedObj[key] = item.value;
      } else {
        let index = widgetListIndexMap[key];
        if (index !== undefined && widgetList[index]) {
          !changedObj.widgetList && (changedObj.widgetList = widgetList);
          changedObj.widgetList[index].isEnabled = item.value;
        }
      }
    }
    this.setState(({ record }) => ({
      record: { ...record, ...changedObj },
    }));
  }

  onTabsChange = (activeKey) => {
    this.setState({
      activeKey,
    })
  };


  handleSave = async () => {
    this.setState({
      loading: true,
    });
    try {
      let res = await subApplicationService.editHomePageCardDetail(this.state.record);
      if (res && res.data) {
        this.setState({
          loading: false,
        });
        message.success(messages('budget-setting.key31'/*保存成功！*/));
        this.context.router.push(this.state.subApplication)
      } else {
        this.setState({
          loading: false,
        })
      }
    } catch (e) {
      this.setState({
        loading: false,
      })
    }
  };

  render() {
    const {activeKey, record, loading} = this.state;
    return (
      <div>
        <div style={{fontSize: 13, margin: '20px 0 10px 0'}}>{messages('setting.key1614')/*这里可以设置【首页】&【我的】功能的显示与隐藏*/}</div>
        <Tabs activeKey={activeKey} onChange={this.onTabsChange}>
          <TabPane tab={messages('setting.key1615')/*首页*/} key={'index'}>
            <ModuleDisplayIndex activeKey={activeKey}/>
          </TabPane>
          <TabPane tab={messages('setting.key1616')/*我的*/} key={'mime'}>
            <ModuleDisplayMine record={record}
                               loading={loading}
                               activeKey={activeKey}
                               onChange={this.handleFormChange}
                               onSave={this.handleSave}
            />
          </TabPane>
        </Tabs>
      </div>
    )
  }
}

ModuleDisplaySetting.contextTypes ={
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(ModuleDisplaySetting)
